<template>
  <div>
    <el-form label-width="100px" :form="formData" ref="formRef">
      <el-form-item label="图片" prop="imgs">
        <el-upload action="" list-type="picture-card" multiple :before-upload="beforeUpdataImage" :on-change="handleChange" :http-request="httpRequest" :file-list="formData.imgs">
          <template #default>
            <el-icon><plus /></el-icon>
          </template>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon><delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频" prop="video">
        <el-upload action="" list-type="picture-card" multiple :before-upload="beforeUpdataVideo" :on-change="handleChange" :http-request="httpRequest" :file-list="formData.video">
          <template #default>
            <el-icon><plus /></el-icon>
          </template>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon><delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="文本" prop="text"> </el-form-item>
    </el-form>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElForm, ElMessage } from 'element-plus'
  import { Plus, ZoomIn, Download, Delete } from '@element-plus/icons-vue'
  import type { UploadFile } from 'element-plus/es/components/upload/src/upload'
  import { uploadUrl, uploadFile, uploadOss, uploadFile2 } from '@/api/common'
  const formRef = ref<InstanceType<typeof ElForm>>()
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const disabled = ref(false)
  const formData = reactive({
    imgs: [],
    video: [],
    text: []
  })
  const beforeUpdataImage = (file: any) => {
    const is2M = file.size / 1024 / 1024 <= 2
    const acceptImg = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg']
    if (!acceptImg.includes(file.type)) {
      ElMessage.warning('请上传支持的图片格式')
      return
    }
    if (!is2M) {
      ElMessage.warning('上传的图片最大支持2M')
      return
    }
    return is2M && acceptImg.includes(file.type)
  }
  const handleRemove = (file: UploadFile) => {
    formData.imgs.filter((item) => file)
  }
  const uploadImg = async (file: UploadFile) => {
    let flag = beforeUpdataImage(file.file)
    if (!flag) return
    let res = await uploadFile2({
      file,
      fileName: file.name
    })
  }
  const httpRequest = async (e: any) => {
    let file = e.file
    let flag = beforeUpdataImage(file)
    if (!flag) return
    const res: any = await uploadFile({
      fileName: file.name
    })
    const form = new FormData()
    form.append('name', file.name)
    form.append('key', res.dir)
    form.append('policy', res.policy)
    form.append('OSSAccessKeyId', res.accessid)
    form.append('callback', res.callback)
    form.append('Signature', res.signature)
    form.append('Expires', res.expire)
    form.append('success_action_status', '200')
    form.append('file', file)
    const data = await uploadOss({
      url: res.host,
      method: 'post',
      type: 2,
      data: form
    })
    formData.imgs.push({
      code: data.code,
      url: res.host + res.dir
    })
  }
  // const handleChange = (file: UploadFile, list: UploadFile[]) => {
  //   // uploadImg(file)
  // }
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }
</script>
<style lang="scss" scoped></style>
